<template>
  <a-card :bodyStyle="{ height: '100%' }" class="menu-body flex-1 h-[100%]">
    <a-tabs v-model:activeKey="activeKey" class="h-[100%]">
      <a-tab-pane key="system" tab="系统功能" class="h-[100%]">
        <a-input-search
          v-if="allowSearch"
          v-model:value.lazy="menuName"
          placeholder="请输入菜单名"
          @search="search"
          @change="search"
          autofocus
          allowClear
        />
        <a-card :loading="loading" class="h-[100%]" :body-style="{ padding: 0 }">
          <ul class="grid grid-cols-3 mt-8">
            <li
              class="flex flex-col justify-center align-center"
              v-for="item in menus"
              @dblclick="open(item)"
              :class="{ active: item.id === active }"
              @click="select(item)"
            >
              <AxImage
                :src="getSystemIcon(item.icon!)"
                :width="30"
                :height="30"
                v-if="item.menuType === 'C'"
              ></AxImage>
              <AxImage
                :src="getSystemIcon('system/folder.png')"
                :width="30"
                :height="30"
                v-else-if="item.menuType === 'M'"
              />
              <div class="mt-8 file-title">{{ item.title }}</div>
            </li>
          </ul>
        </a-card>
      </a-tab-pane>
      <a-tab-pane key="tool" tab="系统工具">
        <ul class="grid grid-cols-3" ref="sortRef">
          <li
            class="flex flex-col justify-center align-center"
            @click="item.action(item)"
            v-for="(item, key) in plugins"
            :key="key"
          >
            <AxImage :src="item.icon" :width="30" :height="30" />
            <div class="mt-8">{{ item.title }}</div>
          </li>
        </ul>
      </a-tab-pane>
      <a-tab-pane key="search"></a-tab-pane>
      <template #rightExtra v-if="activeKey === 'system'">
        <div class="system__icon" @click="allowSearch = !allowSearch">
          <SearchOutlined />
        </div>
      </template>
    </a-tabs>
  </a-card>
</template>

<script setup lang="ts">
import { MenuTypeEnum } from '@/api/modules/system/menu/types';
import type { Routers } from '@/api/modules/system/user/types';
import { getSystemIcon } from '@/api/utils/image';
import { flattenTree } from '@/utils/common/tree';
import { SearchOutlined } from '@ant-design/icons-vue';
import { useSortable } from '@vueuse/integrations/useSortable';
import { getUserRouters, openApp } from '../../apps/data';
import { plugins, showStarter } from '../data';

const activeKey = ref<'system' | 'tool'>('system');

const loading = ref(false);
const allowSearch = ref(false);
const active = ref();
const sortRef = ref();
const menuName = ref('');
const menus = ref<Routers[]>([]);
const open = (item: Routers) => {
  openApp(item);
  showStarter.value = false;
};
const select = (item: Routers) => {
  active.value = item.id;
};
nextTick(() => {
  useSortable(sortRef, plugins, {
    animation: 200,
  });
});

const getData = async () => {
  try {
    loading.value = true;
    const treeData = await getUserRouters();
    loading.value = false;

    menus.value =
      flattenTree(treeData).filter(e => {
        return (
          e.title.includes(menuName.value) &&
          [MenuTypeEnum.CATEGORY, MenuTypeEnum.MENU].includes(e.menuType)
        );
      }) || [];
  } catch (error) {
    loading.value = false;
  }
};
const search = () => {
  getData();
  activeKey.value = 'system';
};
onMounted(async () => {
  getData();
});
</script>

<style lang="scss" scoped>
@import './body.scss';
</style>
